<template>
    <div class="companydetail">
        <main-header></main-header>
        <div class="company clearfix">
							<div class="col-xs-9">
								<div class="clearfix"><div class="col-xs-7 cp-name">{{companyMsg.name}}</div></div>
								<p><span v-for="tag in companyMsg.tags">{{tag}}</span></p>
								<p style="font-size: 12px; margin-top: 1px;">{{companyMsg.date}}</p>
							</div>
							<div class="col-xs-3"><a><img :src="companyMsg.img"></a></div>
						</div>
						<!--company-->
						<div class="cmp_msg">
							<ul id="myTab" class="nav nav-tabs">
								<li class="active col-xs-6">
									<a href="#msg" data-toggle="tab">公司信息</a>
								</li>
								<li class="col-xs-6"><a href="#jobs" data-toggle="tab">热招职位</a></li>
							</ul>
							<div id="myTabContent" class="tab-content">
								<div class="tab-pane fade in active" id="msg">
									<h4>公司简介</h4>
									<p v-html="companyMsg.info"></p>
									<h4>产品介绍</h4>
									<!-- <ul class="pd_swiper">
										<li v-for="item in companyMsg.production">
											<a>
												<img :src="item.img" />
											</a>
											<div>
												<p>{{item.name}}</p>
												<a>{{item.net}}</a>
											</div>
										</li>
									</ul> -->
									<van-swipe @change="onChange" :loop="false" :width="250" class="pd_swiper">
										<van-swipe-item v-for="item in companyMsg.production">
											<a><img :src="item.img" /></a>
											<div>
												<p>{{item.name}}</p>
												<a>{{item.net}}</a>
											</div>
										</van-swipe-item>
										<template #indicator>
											<div class="custom-indicator">
											{{ current + 1 }}/4
											</div>
										</template>
									</van-swipe>
									<h4>公司照片</h4>
									<van-swipe @change="onChange" :loop="false" :width="327" class="company_pic">
										<van-swipe-item v-for="imgs in companyMsg.company_pic" :key="imgs.img"><img :src="imgs.img"></van-swipe-item>
										<template #indicator>
											<div class="custom-indicator">{{ current + 1 }}/4</div>
										</template>
									</van-swipe>
									<h4>公司官网</h4>
									<p><a :href="companyMsg.company_net">{{companyMsg.company_net}}</a></p>
									<h4>工商信息</h4>
									<div class="gongshang" :class="{activeHeight:isActive}">
										<p><span>工商全名：</span><em>{{companyMsg.full_name}}</em></p>
										<p><span>成立时间：</span><em>{{companyMsg.company_date}}</em></p>
										<p><span>注册资本：</span><em>{{companyMsg.money}}</em></p>
										<p><span>法人代表：</span><em>{{companyMsg.boss}}</em></p>
										<p><span>企业类型：</span><em>{{companyMsg.type}}</em></p>
										<p><span>经营状态：</span><em>{{companyMsg.status}}</em></p>
										<p><span>注册地址：</span><em>{{companyMsg.addrs}}</em></p>
										<p><span>统一信用代码：</span><em>{{companyMsg.code}}</em></p>
										<p>
											<span>经营范围：</span>
											<em v-html="companyMsg.business"></em>
										</p>
									</div>
										<div class="tip">以上数据来自企查看
											<a @click="showAll" v-if="!isActive">展开▼</a>
											<a @click="showAll" v-if="isActive">收起▲</a>
										</div>
								</div>
								<div class="tab-pane fade" id="jobs">
									<ul class="list">
										<li class="clearfix" v-for="msg in companyMsg.hot_jobs" :key="msg.id">
											<div class="col-xs-8">
												<a>{{msg.job_name}}</a>
												<p>
													<span>{{msg.city}}</span>
													<em data-v-d4b44aaa="" class="vline"></em>
													<span>{{msg.exp}}</span>
													<em data-v-d4b44aaa="" class="vline"></em>
													<span>{{msg.edc}}</span></p>
												<div><img :src="msg.avatar">{{msg.name}} · {{msg.title}}</div>
											</div>
											<div class="col-xs-4">
												<p>{{msg.payment}}</p>
												<p><button type="button" class="btn btn-default">立即沟通</button></p>
											</div>
										</li>
									</ul>
									<div style="text-align: center; line-height: 54px;">加载更多</div>
								</div>
							</div>
						</div>
                        <tuijian></tuijian>
    </div>
</template>

<script>
import tuijian from './subcomponents/tj.vue'
import mainHeader from './subcomponents/mainHeader.vue'
export default {
    data() {
        return {
            companyMsg:[],
			id:this.$route.params.id,
			isActive:false,
			flag:false,
			current: 0,
        }
    },
    created() {
        this.getCompanyMsg()
    },
    methods: {
        getCompanyMsg(){
            this.$http.get('http://127.0.0.1:3000/api/company/'+this.id+'.json').then(result => {
                this.companyMsg=result.body
            })
        },
		showAll (){
			this.isActive=!this.isActive
		},
		onChange(index) {
      		this.current = index;
    	}
    },
    components:{
        mainHeader,
        tuijian
    }
}
</script>

<style lang="scss" scoped>
/*list*/
.list li {padding: 15px 0; border-bottom:1px solid #eee;}
.list .col-xs-5 {padding: 0;}
.list .col-xs-5 a {color: #555; font-size: 14px;}
.list .col-xs-5 p {font-size: 12px; margin-top: 2px;}
.list .col-xs-5 p span {margin-right: 10px; color: #aaa;}
.list .col-xs-4 {padding-left: 0; color: #fc6c38; font-size: 19px; text-align: right;}
.list .col-xs-3 img {width: 59px; height: 59px;}
/*company*/
.company {background: #eefbf9; padding: 15px 0;}
.company .col-xs-9 {font-size: 12px; padding-left: 0;}
.company .col-xs-9 .cp-name {font-size: 17px; padding-left: 0; color: #414a60;}
.company .col-xs-3 a img {width: 64px; height: 64px; border-radius: 10px;}
.company .col-xs-9 p {line-height: 20px;}
.company .col-xs-9 .btn { border-radius: 50px; background: #5dd5c8; border: none; color: #fff;}
.vline {display: inline-block; width: 1px; height: 12px; vertical-align: middle; background: #e0e0e0; margin: 0 10px;}
/*companydetail*/
.companydetail .company {background-color: #fff;}
.companydetail .company .col-xs-9 {padding-left:20px}
.companydetail .company .col-xs-9 .cp-name {font-size: 24px;}
.companydetail .company .col-xs-9 p {font-size: 14px; line-height: 24px; margin-top: 5px;}
.companydetail .company .col-xs-9 p span { margin-right: 10px;}
/*cmp_msg*/
.cmp_msg .nav-tabs {border: none; padding: 0 15px;}
.cmp_msg .nav-tabs .col-xs-6 { text-align: center; border-bottom: 1px solid #eee; padding: 0; line-height: 38px;}
.cmp_msg .nav>li>a {display: inline;}
.cmp_msg .nav-tabs>li.active>a { border:none; border-bottom: 2px solid #53cac3;}
.cmp_msg .tab-content {padding: 15px; margin-top: 5px;}
.cmp_msg .tab-content h4 { font-size: 18px; margin: 30px 0 15px 0; color: #333;}
.cmp_msg .tab-content p {line-height: 26px;}
.pd_swiper {overflow: hidden; position: relative;}
.pd_swiper .van-swipe-item {display: flex; justify-content: start; float: left;}
.pd_swiper .van-swipe-item img {width: 48px; border-radius: 5px;}
.pd_swiper .van-swipe-item div { padding-left: 15px;}
.pd_swiper .van-swipe-item div p {font-size: 16px; color: #333;}
.pd_swiper .custom-indicator {text-align: right;}
.cmp_msg .gongshang {height:235px;overflow:hidden;}
.cmp_msg .gongshang p {line-height: 24px; display: flex; justify-content: start; border-bottom: 1px solid #eee; padding: 15px 0;}
.cmp_msg .gongshang p span {flex: none;}
.cmp_msg .tip {font-size: 12px; padding: 15px 0; display: flex; justify-content: space-between;}
.cmp_msg .tip a {color: #36b5b5;}
.cmp_msg .activeHeight {height: 100%;}
.company_pic {position: relative; overflow: hidden;}
.company_pic .van-swipe-item { float: left;}
.company_pic .van-swipe-item img {width: 317px; height: 190px; border-radius: 15px 15px 0 0; margin-right:10px;}
.company_pic .custom-indicator {
    position: absolute;
    right: 45px;
    top: 35px;
    padding: 2px 10px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border-radius: 5px;
	}
/*jobs*/
#jobs .col-xs-8 a {color: #333; font-size: 16px;}
#jobs .col-xs-8 p {font-size: 12px;}
#jobs .col-xs-8 div {font-size: 12px; margin-top: 5px;}
#jobs .list .col-xs-8 img {width: 20px; height: 20px; border-radius: 50%; margin-right: 10px;}
#jobs .list .col-xs-4 button { margin-top: 10px; color:#fff; background: #5dd5c8; border: none;}
</style>